<script type="text/javascript" src="<?php echo base_url(); ?>js/autoNumeric-1.7.5.js"></script>
<script type="text/javascript">
	function removeRow(id){
		$('#row-'+id).hide();
	}
	
	function autoCompleteDari(id){
		var ac_config = {
			source: "<?php echo base_url(); ?>distribusi/auto_complete_titik_pasok",
			select: function(event, ui){
				$('#id-dari-'+id).val(ui.item.ID_TITIK_PASOK);
				$('#dari-'+id).val(ui.item.NAMA);
			},
			minLength:1
		};
		$('#dari-'+id).autocomplete(ac_config);
	}
	
	function autoCompleteKe(id){
		var ac_config = {
			source: "<?php echo base_url(); ?>distribusi/auto_complete_titik_pasok",
			select: function(event, ui){
				$('#id-ke-'+id).val(ui.item.ID_TITIK_PASOK);
				$('#ke-'+id).val(ui.item.NAMA);
			},
			minLength:1
		};
		$('#ke-'+id).autocomplete(ac_config);
	}
	
	function autoCompleteSapi(id){
		var ac_config = {
			source: "<?php echo base_url(); ?>distribusi/auto_complete_sapi",
			select: function(event, ui){
				$('#id-sapi-'+id).val(ui.item.ID_SAPI);
				$('#jenis-'+id).val(ui.item.NAMA);
			},
			minLength:1
		};
		
		$('#jenis-'+id).autocomplete(ac_config);
	}
	
	function autoNumeric(id){
		$('#jumlah-'+id).autoNumeric({
			aSep:'.',
			dGroup:'3',
			aDec:',',
			vMax:'999999999999',	
			vMin:'0'
		});
	}
	
	$(document).ready(function(){
		var rowNum = 2;
		
		function addRow(id){
			var row = '<tr id="row-'+id+'">';
			row += '<td>'+id+'</td>';
			row += '<td><input type="text" onkeyup="autoCompleteDari('+id+');" id="dari-'+id+'"><input type="hidden" id="id-dari-'+id+'"></td>';
			row += '<td><input type="text" onkeyup="autoCompleteKe('+id+');" id="ke-'+id+'"><input type="hidden" id="id-ke-'+id+'"></td>';
			row += '<td><input style="width: 80px;" onkeyup="autoCompleteSapi('+id+')" type="text" id="jenis-'+id+'"><input type="hidden" id="id-sapi-'+id+'"></td>';
			row += '<td><input style="width: 40px;" type="text" onkeyup="autoNumeric('+id+')" id="jumlah-'+id+'"></td>';
			row += '<td><textarea id="komentar-'+id+'"></textarea></td>';
			
			if(id > 1){
				row += '<td><a onclick="removeRow('+id+');" href="#" id="remove-button-'+id+'" class="btn btn-round"><i class="icon-remove"></i></a></td>';
			} else {
				row += '<td></td>';
			}
			
			row += '</tr>';
			
			$('#distribution-list-rows').append(row);
		}
		
		function insertDistribution(dari, ke, idSapi, jumlah, revisi, komentar){
			$.ajax({
				url: "<?= base_url(); ?>distribusi/insert_to_distribusi",
				type: "POST",
				data: "dari="+dari+"&ke="+ke+"&id_sapi="+idSapi+"&jumlah="+jumlah+"&revisi="+revisi+"&komentar="+komentar,
				success: function(msg){
					//alert(msg);
					//window.location = "<?= base_url(); ?>produksi_rph";
				}
			});
		}
			
		$('#tambah-button').click(function(){
			var num = $('#jumlah_data').val();
			var total = rowNum;
			for(var i=rowNum; i<(parseInt(num)+parseInt(rowNum)); i++){
				addRow(i);
				total++;
			}
			
			rowNum = total;
		});
		
		addRow(1);
		
		$('#jumlah_data').keyup(function()
		{
			$('#jumlah_data').autoNumeric({
				aSep:'.',
				dGroup:'3',
				aDec:',',
				vMax:'999999999999',	
				vMin:'0'
			});
			
		});
		
		$('#simpan-button').click(function(){
			for(var i=1; i<rowNum; i++){
				var dari = $('#id-dari-'+i).val();
				var ke = $('#id-ke-'+i).val();
				var idSapi = $('#id-sapi-'+i).val();
				var jumlah = $('#jumlah-'+i).val();
				
				if(dari != '' && ke != '' && idSapi != '' && jumlah != ''){
					var revisi = 0;
					var komentar = $('#komentar-'+i).val();
					
					insertDistribution(dari, ke, idSapi, jumlah, revisi, komentar);
					
					window.location = "<?= base_url(); ?>distribusi";
				}
			}
		});
		
		
	});
</script>

<style>
	
	.numeric{
		text-align: right;
	}
</style>

<div class="row-fluid sortable">
	<div class="box span6">
		<div class="box-header well" data-original-title>
			<h2><i class="icon-info-sign"></i> Parameter</h2>
			
		</div>
		<div class="box-content form-inline">
			Jumlah Data:
			&nbsp&nbsp
			<input name="jumlah_data" id="jumlah_data" type="text" >
			<button class="btn" id="tambah-button">Tambah</button>
		</div>
	</div>
	
	<div class="row-fluid sortable">
		<div class="box span12">
			<div class="box-header well" data-original-title><h2>Daftar Distribusi</h2></div>
			<div class="box-content">
				<table class="table table-bordered">
					<thead>
						<th style="vertical-align: middle; text-align: center;">#</th>
						<th style="vertical-align: middle; text-align: center;">Asal</th>
						<th style="vertical-align: middle; text-align: center;">Tujuan</th>
						<th style="vertical-align: middle; text-align: center;">Jenis Produk</th>
						<th style="vertical-align: middle; text-align: center;">Jumlah</th>
						<th style="vertical-align: middle; text-align: center;">Komentar</th>
						<th style="vertical-align: middle; text-align: center;"></th>
					</thead>
					<tbody id="distribution-list-rows">
						
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<button class="btn" id="simpan-button">Simpan</button>
</div>